<template>
  <h4>当前的sum={{sum}}</h4>
  <button @click="sum++">点我sum++</button>
  <hr>
  <h2>一个人的信息</h2>
  <h3>姓名：{{name}}</h3>
  <h3>年龄：{{age}}</h3>
  <h3>薪资：{{job.j1.salary}}k</h3>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">加薪</button>
</template>

<script>
import { reactive, ref, toRefs, readonly, shallowReadonly} from 'vue';
export default {
  name: 'Demo', 
  setup() {
    let sum = ref(0)

    let person = reactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })
    
    //readonly接收一个响应式数据，返回一个只读的响应式数据；无法修改数据（如果尝试修改vue3控制台给出警告）
    sum = readonly(sum)
    // person = readonly(person)

    //shallowReadonly接收一个响应式数据，返回一个第一层属性只读的响应式数据
    // sum = shallowReadonly(sum) //对于基本类型，readonly和shallowReadonly没有区别
    person = shallowReadonly(person)

    return {
      ...toRefs(person),
      sum,
    }
  }
}
</script>

<style>
</style>